<template name="index">

    <!-- Intro Header -->
    <header class="intro">
        <div class="intro-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <h1 class="brand-heading">SAVE UP TO 60% FOR MEALS AT LOCAL RESTAURANTS</h1>
                        <div id="subscribeForm">
                            {{> MailChimpListSubscribe}}
                        </div>

                        <!--                        <a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a> -->
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- About Section -->
    <section id="about" class="container content-section text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Be Social. Support Local. Dineout.</h2>
                <p>By partnering with amazing restaurants from Miami and New York, we give you unprecedented discounts for excellent meals.</p>
            </div>


        </div>

        <div class="row mt centered">
            <div class="col-lg-4">
                <i class="fa fa-pencil-square-o fa-5"></i>
                <h4>1. Reserve your Meal</h4>
            </div>
            <div class="col-lg-4">
                <i class="fa fa-mail-forward fa-5"></i>
                <h4>2. Receive your Coupon</h4>
            </div>
            <div class="col-lg-4">
                <i class="fa fa-cutlery fa-5"></i>
                <h4>3. Dine in the Restaurant</h4>
            </div>
        </div>

    </section>

    <!-- Download Section -->
    <section id="download" class="content-section text-center">
        <div class="download-section">
            <div class="container">
                
                <div class="row">    <div class="col-lg-8 col-lg-offset-2">
                    <h2>HOW MUCH CAN YOU SAVE?</h2>
                    
                        {{> slider}}    

                    
                    </div></div>
            <div class="row">    <div class="col-lg-8 col-lg-offset-2">
                    <h2>SUBSCRIBE NOW</h2>
                    <!--<h2>SIGN UP NOW</h2>
<p>You can sign up now for just $9.99.</p> 
<a href="/signup" class="btn btn-default btn-lg">Sign up now</a> -->
                    <div id="subscribeForm">
                        {{> MailChimpListSubscribe}}
                    </div>

                </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="container content-section text-center">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2">
                <h2>Contact Dineout.io</h2>
                <p>Feel free to email us to provide some feedback, give us suggestions or to just say hello!</p>
                <p><a href="mailto:feedback@dineout.io">feedback@dineout.io</a>
                </p>
                <ul class="list-inline banner-social-buttons">
                    <li>
                        <a href="https://facebook.com/dineout" class="btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
                    </li>
                    <li>
                        <a href="https://instagram.com/dineout" class="btn btn-default btn-lg"><i class="fa fa-instagram fa-fw"></i> <span class="network-name">Instagram</span></a>
                    </li>
                    <li>
                        <a href="https://twitter.com/dineoutio" class="btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                    </li>
                </ul>
            </div>
        </div>
    </section>

</template>
